<template>
  <el-row :gutter="10" class="chart-main">
    <el-col :xs="24" :sm="12" :lg="8">
      <el-card>
        <div id="addressPie"/>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="8">
      <el-card>
        <div id="countBar"/>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="8">
      <el-card>
        <div id="roomInc"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getRemainRoom, getRoomRemain} from "@/network/dashboard";

export default {
  name: "PieBar",
  data(){
    return{
      addressPie:null,
      countBar:null,
      roomInc:null,

      countBarData:[],
      roomType:[],
      roomRemain:[],
    }
  },
  methods:{
    buildPie(id){
      this.addressPie = this.$echarts.init(document.getElementById(id))
      this.addressPie.setOption({
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: 'Highest',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: 'Lowest',
            type: 'line',
            data: [1, -2, 2, 5, 3, 2, 0],
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max'
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ]
            }
          }
        ]
      })
    },
    buildBar(id){
      this.countBar = this.$echarts.init(document.getElementById(id))
      this.countBar.setOption({
        tooltip: {
          trigger: 'item'
        },
        title :{
          text: '房间分布情况',
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.countBarData
          }
        ]
      })
    },
    buildInc(id){
      this.roomInc = this.$echarts.init(document.getElementById(id))
      this.roomInc.setOption({
        title :{
          text: '房间剩余情况',
        },
        xAxis: {
          type: 'category',
          data: this.roomType
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.roomRemain,
            type: 'bar'
          }
        ]
      })
    }
  },
  mounted() {
    this.buildPie('addressPie')

    //缩放重新渲染
    let _this = this;
    window.addEventListener('resize',function () {
      _this.addressPie.resize();
      _this.countBar.resize();
      _this.roomInc.resize();
    })
  },
  created() {
    getRoomRemain().then(res=>{
      this.countBarData = res.data.data
      this.buildBar('countBar')
    })
    getRemainRoom().then(res=>{
      res.data.data.forEach(s=>{
        this.roomType.push(s.beds)
        this.roomRemain.push(s.count)
      })
      this.buildInc('roomInc')
    })
  }

}
</script>

<style scoped>
  .chart-main {
    width: 100%;
    height: 400px;
  }
  .chart-main div {
    height: 400px;
  }
</style>